<template>
  <div v-if="formValidate">
    <Modal
      v-model="modals"
      width="850"
      scrollable
      footer-hide
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :label-width="110"
        :rules="ruleValidate"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col span="24">
            <FormItem label="类型：">
              <RadioGroup
                v-model="formValidate.auth_type"
                @on-change="changeRadio"
              >
                <Radio
                  :label="item.value"
                  v-for="(item, i) in optionsRadio"
                  :key="i"
                >
                  <Icon type="social-apple"></Icon>
                  <span>{{ item.label }}</span>
                </Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="按钮名称：" prop="menu_name">
              <Input
                v-model="formValidate.menu_name"
                placeholder="请输入按钮名称"
              ></Input>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="父级分类：">
              <Cascader
                :data="menuList"
                change-on-select
                v-model="formValidate.path"
                filterable
              ></Cascader>
            </FormItem>
          </Col>
          <!-- <Col v-bind="grid">
                        <FormItem label="父级分类：">
                            <Select v-model="formValidate.pid" filterable>
                                <Option v-for="(item,i) in optionsList" :value="item.value" :key="i">{{ item.label }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col> -->
          <!--<Col v-bind="grid" v-if="authType">-->
          <!--<FormItem label="模块名：">-->
          <!--<Select v-model="formValidate.module">-->
          <!--<Option :value="item.value" v-for="(item,i) in optionsListmodule" :key="i">-->
          <!--{{item.label}}-->
          <!--</Option>-->
          <!--</Select>-->
          <!--</FormItem>-->
          <!--</Col>-->
          <!--<Col v-bind="grid" v-if="authType">-->
          <!--<FormItem label="控制器名：">-->
          <!--<Input v-model="formValidate.controller" placeholder="请输入控制器名"></Input>-->
          <!--</FormItem>-->
          <!--</Col>-->
          <!--<Col v-bind="grid" v-if="authType">-->
          <!--<FormItem label="方法名：">-->
          <!--<Input v-model="formValidate.action" placeholder="请输入方法名"></Input>-->
          <!--</FormItem>-->
          <!--</Col>-->
          <Col v-bind="grid" v-if="!authType">
            <FormItem label="请求方式：" prop="methods">
              <Select v-model="formValidate.methods">
                <Option value="">请求</Option>
                <Option value="GET">GET</Option>
                <Option value="POST">POST</Option>
                <Option value="PUT">PUT</Option>
                <Option value="DELETE">DELETE</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid" v-if="!authType">
            <FormItem label="接口地址：">
              <Input
                v-model="formValidate.api_url"
                placeholder="请输入接口地址"
                prop="api_url"
              ></Input>
            </FormItem>
          </Col>
          <Col v-bind="grid" v-if="authType">
            <FormItem label="接口参数：">
              <Input
                v-model="formValidate.params"
                placeholder="举例:a/123/b/234"
              ></Input>
            </FormItem>
          </Col>
          <Col v-bind="grid" v-if="authType">
            <FormItem label="路由名称：" prop="menu_path">
              <Input
                v-model="formValidate.menu_path"
                placeholder="请输入路由名称"
              ></Input>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="权限标识：" prop="unique_auth">
              <Input
                v-model="formValidate.unique_auth"
                placeholder="请输入权限标识"
              ></Input>
            </FormItem>
          </Col>
          <Col v-bind="grid" v-if="authType">
            <FormItem label="图标：">
              <Input
                v-model="formValidate.icon"
                placeholder="请选择图标，点击右面图标"
                icon="ios-appstore"
                @on-click="iconClick"
              ></Input>
            </FormItem>
          </Col>
          <!--<Col v-bind="grid" v-if="authType">-->
          <!--<FormItem label="顶部菜单：">-->
          <!--<Select v-model="formValidate.header" filterable allow-create @on-create="handleCreate1">-->
          <!--<Option v-for="(item,i) in headerOptionsList" :value="item.value" :key="i">{{ item.label-->
          <!--}}-->
          <!--</Option>-->
          <!--</Select>-->
          <!--</FormItem>-->
          <!--</Col>-->
          <Col v-bind="grid">
            <FormItem label="排序：">
              <Input
                type="number"
                v-model="formValidate.sort"
                placeholder="请输入排序"
                number
              ></Input>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="状态：">
              <RadioGroup v-model="formValidate.is_show">
                <Radio
                  :label="item.value"
                  v-for="(item, i) in isShowRadio"
                  :key="i"
                >
                  <Icon type="social-apple"></Icon>
                  <span>{{ item.label }}</span>
                </Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="是否为隐藏菜单：">
              <RadioGroup v-model="formValidate.is_show_path">
                <Radio
                  :label="item.value"
                  v-for="(item, i) in isShowPathRadio"
                  :key="i"
                >
                  <Icon type="social-apple"></Icon>
                  <span>{{ item.label }}</span>
                </Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="24">
            <Button
              type="primary"
              long
              @click="handleSubmit('formValidate')"
              :disabled="valids"
              >提交</Button
            >
          </Col>
        </Row>
      </Form>
    </Modal>
    <Modal v-model="modal12" scrollable width="600" title="Modal 1" footer-hide>
      <Input
        v-model="iconVal"
        placeholder="输入关键词搜索,注意全是英文"
        clearable
        style="width: 300px"
        @on-change="upIcon(iconVal)"
        ref="search"
      />
      <div class="trees-coadd">
        <div class="scollhide">
          <div class="iconlist">
            <ul class="list-inline">
              <li
                class="icons-item"
                v-for="(item, i) in list"
                :key="i"
                :title="item.type"
              >
                <Icon
                  :type="item.type"
                  @click="iconChange(item.type)"
                  class="ivu-icon"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { addMenusApi, addMenus } from "@/api/systemMenus";

export default {
  name: "menusFrom",
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      iconVal: "",
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
        menu_name: [
          { required: true, message: "请输入按钮名称", trigger: "blur" },
        ],
        menu_path: [
          { required: true, message: "请输入路由名称", trigger: "blur" },
        ],
        methods: [
          { required: true, message: "请选择接口请求方式", trigger: "blur" },
        ],
        api_url: [
          { required: true, message: "请填写接口请求地址", trigger: "blur" },
        ],
      },
      FromData: [],
      valids: false,
      list2: [],
      list: [],
      authType: true,
      search: [
        { type: "ios-add" },
        { type: "md-add" },
        { type: "ios-add-circle" },
        { type: "ios-add-circle-outline" },
        { type: "md-add-circle" },
        { type: "ios-alarm" },
        { type: "ios-alarm-outline" },
        { type: "md-alarm" },
        { type: "ios-albums" },
        { type: "ios-albums-outline" },
        { type: "md-albums" },
        { type: "ios-alert" },
        { type: "ios-alert-outline" },
        { type: "md-alert" },
        { type: "ios-american-football" },
        { type: "ios-american-football-outline" },
        { type: "md-american-football" },
        { type: "ios-analytics" },
        { type: "ios-analytics-outline" },
        { type: "md-analytics" },
        { type: "logo-android" },
        { type: "logo-angular" },
        { type: "ios-aperture" },
        { type: "ios-aperture-outline" },
        { type: "md-aperture" },
        { type: "logo-apple" },
        { type: "ios-apps" },
        { type: "ios-apps-outline" },
        { type: "md-apps" },
        { type: "ios-appstore" },
        { type: "ios-appstore-outline" },
        { type: "md-appstore" },
        { type: "ios-archive" },
        { type: "ios-archive-outline" },
        { type: "md-archive" },
        { type: "ios-arrow-back" },
        { type: "md-arrow-back" },
        { type: "ios-arrow-down" },
        { type: "md-arrow-down" },
        { type: "ios-arrow-dropdown" },
        { type: "md-arrow-dropdown" },
        { type: "ios-arrow-dropdown-circle" },
        { type: "md-arrow-dropdown-circle" },
        { type: "ios-arrow-dropleft" },
        { type: "md-arrow-dropleft" },
        { type: "ios-arrow-dropleft-circle" },
        { type: "md-arrow-dropleft-circle" },
        { type: "ios-arrow-dropright" },
        { type: "md-arrow-dropright" },
        { type: "ios-arrow-dropright-circle" },
        { type: "md-arrow-dropright-circle" },
        { type: "ios-arrow-dropup" },
        { type: "md-arrow-dropup" },
        { type: "ios-arrow-dropup-circle" },
        { type: "md-arrow-dropup-circle" },
        { type: "ios-arrow-forward" },
        { type: "md-arrow-forward" },
        { type: "ios-arrow-round-back" },
        { type: "md-arrow-round-back" },
        { type: "ios-arrow-round-down" },
        { type: "md-arrow-round-down" },
        { type: "ios-arrow-round-forward" },
        { type: "md-arrow-round-forward" },
        { type: "ios-arrow-round-up" },
        { type: "md-arrow-round-up" },
        { type: "ios-arrow-up" },
        { type: "md-arrow-up" },
        { type: "ios-at" },
        { type: "ios-at-outline" },
        { type: "md-at" },
        { type: "ios-attach" },
        { type: "md-attach" },
        { type: "ios-backspace" },
        { type: "ios-backspace-outline" },
        { type: "md-backspace" },
        { type: "ios-barcode" },
        { type: "ios-barcode-outline" },
        { type: "md-barcode" },
        { type: "ios-baseball" },
        { type: "ios-baseball-outline" },
        { type: "md-baseball" },
        { type: "ios-basket" },
        { type: "ios-basket-outline" },
        { type: "md-basket" },
        { type: "ios-basketball" },
        { type: "ios-basketball-outline" },
        { type: "md-basketball" },
        { type: "ios-battery-charging" },
        { type: "md-battery-charging" },
        { type: "ios-battery-dead" },
        { type: "md-battery-dead" },
        { type: "ios-battery-full" },
        { type: "md-battery-full" },
        { type: "ios-beaker" },
        { type: "ios-beaker-outline" },
        { type: "md-beaker" },
        { type: "ios-beer" },
        { type: "ios-beer-outline" },
        { type: "md-beer" },
        { type: "ios-bicycle" },
        { type: "md-bicycle" },
        { type: "logo-bitcoin" },
        { type: "ios-bluetooth" },
        { type: "md-bluetooth" },
        { type: "ios-boat" },
        { type: "ios-boat-outline" },
        { type: "md-boat" },
        { type: "ios-body" },
        { type: "ios-body-outline" },
        { type: "md-body" },
        { type: "ios-bonfire" },
        { type: "ios-bonfire-outline" },
        { type: "md-bonfire" },
        { type: "ios-book" },
        { type: "ios-book-outline" },
        { type: "md-book" },
        { type: "ios-bookmark" },
        { type: "ios-bookmark-outline" },
        { type: "md-bookmark" },
        { type: "ios-bookmarks" },
        { type: "ios-bookmarks-outline" },
        { type: "md-bookmarks" },
        { type: "ios-bowtie" },
        { type: "ios-bowtie-outline" },
        { type: "md-bowtie" },
        { type: "ios-briefcase" },
        { type: "ios-briefcase-outline" },
        { type: "md-briefcase" },
        { type: "ios-browsers" },
        { type: "ios-browsers-outline" },
        { type: "md-browsers" },
        { type: "ios-brush" },
        { type: "ios-brush-outline" },
        { type: "md-brush" },
        { type: "logo-buffer" },
        { type: "ios-bug" },
        { type: "ios-bug-outline" },
        { type: "md-bug" },
        { type: "ios-build" },
        { type: "ios-build-outline" },
        { type: "md-build" },
        { type: "ios-bulb" },
        { type: "ios-bulb-outline" },
        { type: "md-bulb" },
        { type: "ios-bus" },
        { type: "ios-bus-outline" },
        { type: "md-bus" },
        { type: "ios-cafe" },
        { type: "ios-cafe-outline" },
        { type: "md-cafe" },
        { type: "ios-calculator" },
        { type: "ios-calculator-outline" },
        { type: "md-calculator" },
        { type: "ios-calendar" },
        { type: "ios-calendar-outline" },
        { type: "md-calendar" },
        { type: "ios-call" },
        { type: "ios-call-outline" },
        { type: "md-call" },
        { type: "ios-camera" },
        { type: "ios-camera-outline" },
        { type: "md-camera" },
        { type: "ios-car" },
        { type: "ios-car-outline" },
        { type: "md-car" },
        { type: "ios-card" },
        { type: "ios-card-outline" },
        { type: "md-card" },
        { type: "ios-cart" },
        { type: "ios-cart-outline" },
        { type: "md-cart" },
        { type: "ios-cash" },
        { type: "ios-cash-outline" },
        { type: "md-cash" },
        { type: "ios-chatboxes" },
        { type: "ios-chatboxes-outline" },
        { type: "md-chatboxes" },
        { type: "ios-chatbubbles" },
        { type: "ios-chatbubbles-outline" },
        { type: "md-chatbubbles" },
        { type: "ios-checkbox" },
        { type: "ios-checkbox-outline" },
        { type: "md-checkbox" },
        { type: "md-checkbox-outline" },
        { type: "ios-checkmark" },
        { type: "md-checkmark" },
        { type: "ios-checkmark-circle" },
        { type: "ios-checkmark-circle-outline" },
        { type: "md-checkmark-circle" },
        { type: "md-checkmark-circle-outline" },
        { type: "logo-chrome" },
        { type: "ios-clipboard" },
        { type: "ios-clipboard-outline" },
        { type: "md-clipboard" },
        { type: "ios-clock" },
        { type: "ios-clock-outline" },
        { type: "md-clock" },
        { type: "ios-close" },
        { type: "md-close" },
        { type: "ios-close-circle" },
        { type: "ios-close-circle-outline" },
        { type: "md-close-circle" },
        { type: "ios-closed-captioning" },
        { type: "ios-closed-captioning-outline" },
        { type: "md-closed-captioning" },
        { type: "ios-cloud" },
        { type: "ios-cloud-outline" },
        { type: "md-cloud" },
        { type: "ios-cloud-circle" },
        { type: "ios-cloud-circle-outline" },
        { type: "md-cloud-circle" },
        { type: "ios-cloud-done" },
        { type: "ios-cloud-done-outline" },
        { type: "md-cloud-done" },
        { type: "ios-cloud-download" },
        { type: "ios-cloud-download-outline" },
        { type: "md-cloud-download" },
        { type: "md-cloud-outline" },
        { type: "ios-cloud-upload" },
        { type: "ios-cloud-upload-outline" },
        { type: "md-cloud-upload" },
        { type: "ios-cloudy" },
        { type: "ios-cloudy-outline" },
        { type: "md-cloudy" },
        { type: "ios-cloudy-night" },
        { type: "ios-cloudy-night-outline" },
        { type: "md-cloudy-night" },
        { type: "ios-code" },
        { type: "md-code" },
        { type: "ios-code-download" },
        { type: "md-code-download" },
        { type: "ios-code-working" },
        { type: "md-code-working" },
        { type: "logo-codepen" },
        { type: "ios-cog" },
        { type: "ios-cog-outline" },
        { type: "md-cog" },
        { type: "ios-color-fill" },
        { type: "ios-color-fill-outline" },
        { type: "md-color-fill" },
        { type: "ios-color-filter" },
        { type: "ios-color-filter-outline" },
        { type: "md-color-filter" },
        { type: "ios-color-palette" },
        { type: "ios-color-palette-outline" },
        { type: "md-color-palette" },
        { type: "ios-color-wand" },
        { type: "ios-color-wand-outline" },
        { type: "md-color-wand" },
        { type: "ios-compass" },
        { type: "ios-compass-outline" },
        { type: "md-compass" },
        { type: "ios-construct" },
        { type: "ios-construct-outline" },
        { type: "md-construct" },
        { type: "ios-contact" },
        { type: "ios-contact-outline" },
        { type: "md-contact" },
        { type: "ios-contacts" },
        { type: "ios-contacts-outline" },
        { type: "md-contacts" },
        { type: "ios-contract" },
        { type: "md-contract" },
        { type: "ios-contrast" },
        { type: "md-contrast" },
        { type: "ios-copy" },
        { type: "ios-copy-outline" },
        { type: "md-copy" },
        { type: "ios-create" },
        { type: "ios-create-outline" },
        { type: "md-create" },
        { type: "ios-crop" },
        { type: "ios-crop-outline" },
        { type: "md-crop" },
        { type: "logo-css3" },
        { type: "ios-cube" },
        { type: "ios-cube-outline" },
        { type: "md-cube" },
        { type: "ios-cut" },
        { type: "ios-cut-outline" },
        { type: "md-cut" },
        { type: "logo-designernews" },
        { type: "ios-desktop" },
        { type: "ios-desktop-outline" },
        { type: "md-desktop" },
        { type: "ios-disc" },
        { type: "ios-disc-outline" },
        { type: "md-disc" },
        { type: "ios-document" },
        { type: "ios-document-outline" },
        { type: "md-document" },
        { type: "ios-done-all" },
        { type: "md-done-all" },
        { type: "ios-download" },
        { type: "ios-download-outline" },
        { type: "md-download" },
        { type: "logo-dribbble" },
        { type: "logo-dropbox" },
        { type: "ios-easel" },
        { type: "ios-easel-outline" },
        { type: "md-easel" },
        { type: "ios-egg" },
        { type: "ios-egg-outline" },
        { type: "md-egg" },
        { type: "logo-euro" },
        { type: "ios-exit" },
        { type: "ios-exit-outline" },
        { type: "md-exit" },
        { type: "ios-expand" },
        { type: "md-expand" },
        { type: "ios-eye" },
        { type: "ios-eye-outline" },
        { type: "md-eye" },
        { type: "ios-eye-off" },
        { type: "ios-eye-off-outline" },
        { type: "md-eye-off" },
        { type: "logo-facebook" },
        { type: "ios-fastforward" },
        { type: "ios-fastforward-outline" },
        { type: "md-fastforward" },
        { type: "ios-female" },
        { type: "md-female" },
        { type: "ios-filing" },
        { type: "ios-filing-outline" },
        { type: "md-filing" },
        { type: "ios-film" },
        { type: "ios-film-outline" },
        { type: "md-film" },
        { type: "ios-finger-print" },
        { type: "md-finger-print" },
        { type: "ios-flag" },
        { type: "ios-flag-outline" },
        { type: "md-flag" },
        { type: "ios-flame" },
        { type: "ios-flame-outline" },
        { type: "md-flame" },
        { type: "ios-flash" },
        { type: "ios-flash-outline" },
        { type: "md-flash" },
        { type: "ios-flask" },
        { type: "ios-flask-outline" },
        { type: "md-flask" },
        { type: "ios-flower" },
        { type: "ios-flower-outline" },
        { type: "md-flower" },
        { type: "ios-folder" },
        { type: "ios-folder-outline" },
        { type: "md-folder" },
        { type: "ios-folder-open" },
        { type: "ios-folder-open-outline" },
        { type: "md-folder-open" },
        { type: "ios-football" },
        { type: "ios-football-outline" },
        { type: "md-football" },
        { type: "logo-foursquare" },
        { type: "logo-freebsd-devil" },
        { type: "ios-funnel" },
        { type: "ios-funnel-outline" },
        { type: "md-funnel" },
        { type: "ios-game-controller-a" },
        { type: "ios-game-controller-a-outline" },
        { type: "md-game-controller-a" },
        { type: "ios-game-controller-b" },
        { type: "ios-game-controller-b-outline" },
        { type: "md-game-controller-b" },
        { type: "ios-git-branch" },
        { type: "md-git-branch" },
        { type: "ios-git-commit" },
        { type: "md-git-commit" },
        { type: "ios-git-compare" },
        { type: "md-git-compare" },
        { type: "ios-git-merge" },
        { type: "md-git-merge" },
        { type: "ios-git-network" },
        { type: "md-git-network" },
        { type: "ios-git-pull-request" },
        { type: "md-git-pull-request" },
        { type: "logo-github" },
        { type: "ios-glasses" },
        { type: "ios-glasses-outline" },
        { type: "md-glasses" },
        { type: "ios-globe" },
        { type: "ios-globe-outline" },
        { type: "md-globe" },
        { type: "logo-google" },
        { type: "logo-googleplus" },
        { type: "ios-grid" },
        { type: "ios-grid-outline" },
        { type: "md-grid" },
        { type: "logo-hackernews" },
        { type: "ios-hammer" },
        { type: "ios-hammer-outline" },
        { type: "md-hammer" },
        { type: "ios-hand" },
        { type: "ios-hand-outline" },
        { type: "md-hand" },
        { type: "ios-happy" },
        { type: "ios-happy-outline" },
        { type: "md-happy" },
        { type: "ios-headset" },
        { type: "ios-headset-outline" },
        { type: "md-headset" },
        { type: "ios-heart" },
        { type: "ios-heart-outline" },
        { type: "md-heart" },
        { type: "md-heart-outline" },
        { type: "ios-help" },
        { type: "md-help" },
        { type: "ios-help-buoy" },
        { type: "ios-help-buoy-outline" },
        { type: "md-help-buoy" },
        { type: "ios-help-circle" },
        { type: "ios-help-circle-outline" },
        { type: "md-help-circle" },
        { type: "ios-home" },
        { type: "ios-home-outline" },
        { type: "md-home" },
        { type: "logo-html5" },
        { type: "ios-ice-cream" },
        { type: "ios-ice-cream-outline" },
        { type: "md-ice-cream" },
        { type: "ios-image" },
        { type: "ios-image-outline" },
        { type: "md-image" },
        { type: "ios-images" },
        { type: "ios-images-outline" },
        { type: "md-images" },
        { type: "ios-infinite" },
        { type: "ios-infinite-outline" },
        { type: "md-infinite" },
        { type: "ios-information" },
        { type: "md-information" },
        { type: "ios-information-circle" },
        { type: "ios-information-circle-outline" },
        { type: "md-information-circle" },
        { type: "logo-instagram" },
        { type: "ios-ionic" },
        { type: "ios-ionic-outline" },
        { type: "md-ionic" },
        { type: "ios-ionitron" },
        { type: "ios-ionitron-outline" },
        { type: "md-ionitron" },
        { type: "logo-javascript" },
        { type: "ios-jet" },
        { type: "ios-jet-outline" },
        { type: "md-jet" },
        { type: "ios-key" },
        { type: "ios-key-outline" },
        { type: "md-key" },
        { type: "ios-keypad" },
        { type: "ios-keypad-outline" },
        { type: "md-keypad" },
        { type: "ios-laptop" },
        { type: "md-laptop" },
        { type: "ios-leaf" },
        { type: "ios-leaf-outline" },
        { type: "md-leaf" },
        { type: "ios-link" },
        { type: "ios-link-outline" },
        { type: "md-link" },
        { type: "logo-linkedin" },
        { type: "ios-list" },
        { type: "md-list" },
        { type: "ios-list-box" },
        { type: "ios-list-box-outline" },
        { type: "md-list-box" },
        { type: "ios-locate" },
        { type: "ios-locate-outline" },
        { type: "md-locate" },
        { type: "ios-lock" },
        { type: "ios-lock-outline" },
        { type: "md-lock" },
        { type: "ios-log-in" },
        { type: "md-log-in" },
        { type: "ios-log-out" },
        { type: "md-log-out" },
        { type: "ios-magnet" },
        { type: "ios-magnet-outline" },
        { type: "md-magnet" },
        { type: "ios-mail" },
        { type: "ios-mail-outline" },
        { type: "md-mail" },
        { type: "ios-mail-open" },
        { type: "ios-mail-open-outline" },
        { type: "md-mail-open" },
        { type: "ios-male" },
        { type: "md-male" },
        { type: "ios-man" },
        { type: "ios-man-outline" },
        { type: "md-man" },
        { type: "ios-map" },
        { type: "ios-map-outline" },
        { type: "md-map" },
        { type: "logo-markdown" },
        { type: "ios-medal" },
        { type: "ios-medal-outline" },
        { type: "md-medal" },
        { type: "ios-medical" },
        { type: "ios-medical-outline" },
        { type: "md-medical" },
        { type: "ios-medkit" },
        { type: "ios-medkit-outline" },
        { type: "md-medkit" },
        { type: "ios-megaphone" },
        { type: "ios-megaphone-outline" },
        { type: "md-megaphone" },
        { type: "ios-menu" },
        { type: "ios-menu-outline" },
        { type: "md-menu" },
        { type: "ios-mic" },
        { type: "ios-mic-outline" },
        { type: "md-mic" },
        { type: "ios-mic-off" },
        { type: "ios-mic-off-outline" },
        { type: "md-mic-off" },
        { type: "ios-microphone" },
        { type: "ios-microphone-outline" },
        { type: "md-microphone" },
        { type: "ios-moon" },
        { type: "ios-moon-outline" },
        { type: "md-moon" },
        { type: "ios-more" },
        { type: "ios-more-outline" },
        { type: "md-more" },
        { type: "ios-move" },
        { type: "md-move" },
        { type: "ios-musical-note" },
        { type: "ios-musical-note-outline" },
        { type: "md-musical-note" },
        { type: "ios-musical-notes" },
        { type: "ios-musical-notes-outline" },
        { type: "md-musical-notes" },
        { type: "ios-navigate" },
        { type: "ios-navigate-outline" },
        { type: "md-navigate" },
        { type: "ios-no-smoking" },
        { type: "ios-no-smoking-outline" },
        { type: "md-no-smoking" },
        { type: "logo-nodejs" },
        { type: "ios-notifications" },
        { type: "ios-notifications-outline" },
        { type: "md-notifications" },
        { type: "ios-notifications-off" },
        { type: "ios-notifications-off-outline" },
        { type: "md-notifications-off" },
        { type: "md-notifications-outline" },
        { type: "ios-nuclear" },
        { type: "ios-nuclear-outline" },
        { type: "md-nuclear" },
        { type: "ios-nutrition" },
        { type: "ios-nutrition-outline" },
        { type: "md-nutrition" },
        { type: "logo-octocat" },
        { type: "ios-open" },
        { type: "ios-open-outline" },
        { type: "md-open" },
        { type: "ios-options" },
        { type: "ios-options-outline" },
        { type: "md-options" },
        { type: "ios-outlet" },
        { type: "ios-outlet-outline" },
        { type: "md-outlet" },
        { type: "ios-paper" },
        { type: "ios-paper-outline" },
        { type: "md-paper" },
        { type: "ios-paper-plane" },
        { type: "ios-paper-plane-outline" },
        { type: "md-paper-plane" },
        { type: "ios-partly-sunny" },
        { type: "ios-partly-sunny-outline" },
        { type: "md-partly-sunny" },
        { type: "ios-pause" },
        { type: "ios-pause-outline" },
        { type: "md-pause" },
        { type: "ios-paw" },
        { type: "ios-paw-outline" },
        { type: "md-paw" },
        { type: "ios-people" },
        { type: "ios-people-outline" },
        { type: "md-people" },
        { type: "ios-person" },
        { type: "ios-person-outline" },
        { type: "md-person" },
        { type: "ios-person-add" },
        { type: "ios-person-add-outline" },
        { type: "md-person-add" },
        { type: "ios-phone-landscape" },
        { type: "md-phone-landscape" },
        { type: "ios-phone-portrait" },
        { type: "md-phone-portrait" },
        { type: "ios-photos" },
        { type: "ios-photos-outline" },
        { type: "md-photos" },
        { type: "ios-pie" },
        { type: "ios-pie-outline" },
        { type: "md-pie" },
        { type: "ios-pin" },
        { type: "ios-pin-outline" },
        { type: "md-pin" },
        { type: "ios-pint" },
        { type: "ios-pint-outline" },
        { type: "md-pint" },
        { type: "logo-pinterest" },
        { type: "ios-pizza" },
        { type: "ios-pizza-outline" },
        { type: "md-pizza" },
        { type: "ios-plane" },
        { type: "ios-plane-outline" },
        { type: "md-plane" },
        { type: "ios-planet" },
        { type: "ios-planet-outline" },
        { type: "md-planet" },
        { type: "ios-play" },
        { type: "ios-play-outline" },
        { type: "md-play" },
        { type: "logo-playstation" },
        { type: "ios-podium" },
        { type: "ios-podium-outline" },
        { type: "md-podium" },
        { type: "ios-power" },
        { type: "ios-power-outline" },
        { type: "md-power" },
        { type: "ios-pricetag" },
        { type: "ios-pricetag-outline" },
        { type: "md-pricetag" },
        { type: "ios-pricetags" },
        { type: "ios-pricetags-outline" },
        { type: "md-pricetags" },
        { type: "ios-print" },
        { type: "ios-print-outline" },
        { type: "md-print" },
        { type: "ios-pulse" },
        { type: "ios-pulse-outline" },
        { type: "md-pulse" },
        { type: "logo-python" },
        { type: "ios-qr-scanner" },
        { type: "md-qr-scanner" },
        { type: "ios-quote" },
        { type: "ios-quote-outline" },
        { type: "md-quote" },
        { type: "ios-radio" },
        { type: "ios-radio-outline" },
        { type: "md-radio" },
        { type: "ios-radio-button-off" },
        { type: "md-radio-button-off" },
        { type: "ios-radio-button-on" },
        { type: "md-radio-button-on" },
        { type: "ios-rainy" },
        { type: "ios-rainy-outline" },
        { type: "md-rainy" },
        { type: "ios-recording" },
        { type: "ios-recording-outline" },
        { type: "md-recording" },
        { type: "logo-reddit" },
        { type: "ios-redo" },
        { type: "ios-redo-outline" },
        { type: "md-redo" },
        { type: "ios-refresh" },
        { type: "md-refresh" },
        { type: "ios-refresh-circle" },
        { type: "ios-refresh-circle-outline" },
        { type: "md-refresh-circle" },
        { type: "ios-remove" },
        { type: "md-remove" },
        { type: "ios-remove-circle" },
        { type: "ios-remove-circle-outline" },
        { type: "md-remove-circle" },
        { type: "ios-reorder" },
        { type: "md-reorder" },
        { type: "ios-repeat" },
        { type: "md-repeat" },
        { type: "ios-resize" },
        { type: "md-resize" },
        { type: "ios-restaurant" },
        { type: "ios-restaurant-outline" },
        { type: "md-restaurant" },
        { type: "ios-return-left" },
        { type: "md-return-left" },
        { type: "ios-return-right" },
        { type: "md-return-right" },
        { type: "ios-reverse-camera" },
        { type: "ios-reverse-camera-outline" },
        { type: "md-reverse-camera" },
        { type: "ios-rewind" },
        { type: "ios-rewind-outline" },
        { type: "md-rewind" },
        { type: "ios-ribbon" },
        { type: "ios-ribbon-outline" },
        { type: "md-ribbon" },
        { type: "ios-rose" },
        { type: "ios-rose-outline" },
        { type: "md-rose" },
        { type: "logo-rss" },
        { type: "ios-sad" },
        { type: "ios-sad-outline" },
        { type: "md-sad" },
        { type: "logo-sass" },
        { type: "ios-school" },
        { type: "ios-school-outline" },
        { type: "md-school" },
        { type: "ios-search" },
        { type: "ios-search-outline" },
        { type: "md-search" },
        { type: "ios-send" },
        { type: "ios-send-outline" },
        { type: "md-send" },
        { type: "ios-settings" },
        { type: "ios-settings-outline" },
        { type: "md-settings" },
        { type: "ios-share" },
        { type: "ios-share-outline" },
        { type: "md-share" },
        { type: "ios-share-alt" },
        { type: "ios-share-alt-outline" },
        { type: "md-share-alt" },
        { type: "ios-shirt" },
        { type: "ios-shirt-outline" },
        { type: "md-shirt" },
        { type: "ios-shuffle" },
        { type: "md-shuffle" },
        { type: "ios-skip-backward" },
        { type: "ios-skip-backward-outline" },
        { type: "md-skip-backward" },
        { type: "ios-skip-forward" },
        { type: "ios-skip-forward-outline" },
        { type: "md-skip-forward" },
        { type: "logo-skype" },
        { type: "logo-snapchat" },
        { type: "ios-snow" },
        { type: "ios-snow-outline" },
        { type: "md-snow" },
        { type: "ios-speedometer" },
        { type: "ios-speedometer-outline" },
        { type: "md-speedometer" },
        { type: "ios-square" },
        { type: "ios-square-outline" },
        { type: "md-square" },
        { type: "md-square-outline" },
        { type: "ios-star" },
        { type: "ios-star-outline" },
        { type: "md-star" },
        { type: "ios-star-half" },
        { type: "md-star-half" },
        { type: "md-star-outline" },
        { type: "ios-stats" },
        { type: "ios-stats-outline" },
        { type: "md-stats" },
        { type: "logo-steam" },
        { type: "ios-stopwatch" },
        { type: "ios-stopwatch-outline" },
        { type: "md-stopwatch" },
        { type: "ios-subway" },
        { type: "ios-subway-outline" },
        { type: "md-subway" },
        { type: "ios-sunny" },
        { type: "ios-sunny-outline" },
        { type: "md-sunny" },
        { type: "ios-swap" },
        { type: "md-swap" },
        { type: "ios-switch" },
        { type: "ios-switch-outline" },
        { type: "md-switch" },
        { type: "ios-sync" },
        { type: "md-sync" },
        { type: "ios-tablet-landscape" },
        { type: "md-tablet-landscape" },
        { type: "ios-tablet-portrait" },
        { type: "md-tablet-portrait" },
        { type: "ios-tennisball" },
        { type: "ios-tennisball-outline" },
        { type: "md-tennisball" },
        { type: "ios-text" },
        { type: "ios-text-outline" },
        { type: "md-text" },
        { type: "ios-thermometer" },
        { type: "ios-thermometer-outline" },
        { type: "md-thermometer" },
        { type: "ios-thumbs-down" },
        { type: "ios-thumbs-down-outline" },
        { type: "md-thumbs-down" },
        { type: "ios-thumbs-up" },
        { type: "ios-thumbs-up-outline" },
        { type: "md-thumbs-up" },
        { type: "ios-thunderstorm" },
        { type: "ios-thunderstorm-outline" },
        { type: "md-thunderstorm" },
        { type: "ios-time" },
        { type: "ios-time-outline" },
        { type: "md-time" },
        { type: "ios-timer" },
        { type: "ios-timer-outline" },
        { type: "md-timer" },
        { type: "ios-train" },
        { type: "ios-train-outline" },
        { type: "md-train" },
        { type: "ios-transgender" },
        { type: "md-transgender" },
        { type: "ios-trash" },
        { type: "ios-trash-outline" },
        { type: "md-trash" },
        { type: "ios-trending-down" },
        { type: "md-trending-down" },
        { type: "ios-trending-up" },
        { type: "md-trending-up" },
        { type: "ios-trophy" },
        { type: "ios-trophy-outline" },
        { type: "md-trophy" },
        { type: "logo-tumblr" },
        { type: "logo-tux" },
        { type: "logo-twitch" },
        { type: "logo-twitter" },
        { type: "ios-umbrella" },
        { type: "ios-umbrella-outline" },
        { type: "md-umbrella" },
        { type: "ios-undo" },
        { type: "ios-undo-outline" },
        { type: "md-undo" },
        { type: "ios-unlock" },
        { type: "ios-unlock-outline" },
        { type: "md-unlock" },
        { type: "logo-usd" },
        { type: "ios-videocam" },
        { type: "ios-videocam-outline" },
        { type: "md-videocam" },
        { type: "logo-vimeo" },
        { type: "ios-volume-down" },
        { type: "md-volume-down" },
        { type: "ios-volume-mute" },
        { type: "md-volume-mute" },
        { type: "ios-volume-off" },
        { type: "md-volume-off" },
        { type: "ios-volume-up" },
        { type: "md-volume-up" },
        { type: "ios-walk" },
        { type: "md-walk" },
        { type: "ios-warning" },
        { type: "ios-warning-outline" },
        { type: "md-warning" },
        { type: "ios-watch" },
        { type: "md-watch" },
        { type: "ios-water" },
        { type: "ios-water-outline" },
        { type: "md-water" },
        { type: "logo-whatsapp" },
        { type: "ios-wifi" },
        { type: "ios-wifi-outline" },
        { type: "md-wifi" },
        { type: "logo-windows" },
        { type: "ios-wine" },
        { type: "ios-wine-outline" },
        { type: "md-wine" },
        { type: "ios-woman" },
        { type: "ios-woman-outline" },
        { type: "md-woman" },
        { type: "logo-wordpress" },
        { type: "logo-xbox" },
        { type: "logo-yahoo" },
        { type: "logo-yen" },
        { type: "logo-youtube" },
        { type: "ios-loading" },
      ],
    };
  },
  watch: {
    "formValidate.header": function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    "formValidate.auth_type": function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    "formValidate.data": function (n) {
    },
  },
  computed: {
    /* eslint-disable */
    optionsList() {
      let a = [];
      this.FromData.map((item) => {
        if ("pid" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    headerOptionsList() {
      let a = [];
      this.FromData.map((item) => {
        if ("header" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    optionsListmodule() {
      let a = [];
      this.FromData.map((item) => {
        if ("module" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    optionsRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ("auth_type" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    isheaderRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ("is_header" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    isShowRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ("is_show" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    isShowPathRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ("is_show_path" === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    menuList() {
      let a = [];
      this.FromData.map((item) => {
        if ("menu_list" === item.field) {
          a = item.props.data;
        }
      });
      return a;
    },
  },
  mounted() {
    this.list = this.search;
  },
  methods: {
    changeRadio(n) {
      this.authType = n === 1 ? true : false;
    },
    // 搜索
    upIcon(n) {
      let arrs = [];
      for (var i = 0; i < this.search.length; i++) {
        if (this.search[i].type.indexOf(n) !== -1) {
          arrs.push(this.search[i]);
          this.list = arrs;
        }
      }
    },
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
    // 获取新增表单
    getAddFrom() {
      addMenus()
        .then(async (res) => {
          this.FromData = res.data.rules;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    iconClick() {
      this.modal12 = true;
    },
    iconChange(n) {
      this.formValidate.icon = n;
      this.modal12 = false;
    },
    // 提交
    handleSubmit(name) {
      //判断是否选择父级分类
      if (this.formValidate.path) {
        let length = this.formValidate.path.length;
        this.formValidate.pid = this.formValidate.path[length - 1] || 0;
      }
      let data = {
        url: this.formValidate.id
          ? `/setting/menus/${this.formValidate.id}`
          : "/setting/menus",
        method: this.formValidate.id ? "put" : "post",
        datas: this.formValidate,
      };
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.valids = true;
          addMenusApi(data)
            .then(async (res) => {
              this.$Message.success(res.msg);
              this.modals = false;
              this.$emit("getList");
              this.getAddFrom();
              this.$store.dispatch("admin/menus/getMenusNavList");
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
          if (!this.formValidate.menu_name)
            return this.$Message.error("请添加按钮名称！");
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.$refs["formValidate"].resetFields();
      this.$emit("clearFrom");
    },
  },
  created() {
    this.list = this.search;
    this.getAddFrom();
  },
};
</script>

<style scoped lang="stylus">
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;

  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;

    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }
  }
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;

  >>> .ivu-icon {
    font-size: 32px !important;
  }
}
</style>
